<template>
	<view class="body">
		<view class="header">
			<view style="position: absolute; top: 50px" @click="goBack">
				<uni-icons type="back" size="30"></uni-icons>
			</view>
			<view class="userinfo">
				<uni-data-select :value="storeValue" :localdata="stores" @change="change" :clear="false">
				</uni-data-select>
			</view>

			<view class="vip">
				<uni-row>
					<uni-col span="12" class="item">
						<view class="num">{{ numberFormat(totalPrice, 0) }}</view>
						<view class="label">成交金额</view>
					</uni-col>
					<uni-col span="12" class="item">
						<view class="num">{{ totalOrder }}</view>
						<view class="label">订单数</view>
					</uni-col>
				</uni-row>
			</view>
		</view>

		<view style="height: 10px; background-color: #fff;"></view>

		<uni-section title="客户" type="line" padding="0">
			<uni-grid :column="2" :highlight="true" :showBorder="false" :square="false">
				<uni-grid-item>
					<view class="grid-box">
						<view style="display: flex; justify-content: space-between"
							@click="gotoPage(`/pages/boss/all_customer?osUuid=${storeValue}`)">
							<view style="flex: 1.5; margin-right: 20; text-align: left">
								<Text style="color: #9a7d76">客户数</Text>
								<view style="font-weight: 600; font-size: 25px; margin-top: 5">{{ totalCustomers }}
								</view>
							</view>
							<view style="margin-top: 10px; margin-left: 0px; text-align: right">
								<image src="../../static/images/customers.png" mode="aspectFit"
									style="width: 40px; height: 40px"></image>
							</view>
						</view>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="grid-box grid-box1">
						<view style="display: flex; justify-content: space-between"
							@click="gotoPage(`/pages/boss/fission_customer?osUuid=${storeValue}`)">
							<view style="flex: 1.5; margin-right: 20; text-align: left">
								<Text style="color: #9a7d76">已裂变客户</Text>
								<view style="font-weight: 600; font-size: 25px; margin-top: 5">{{ totalNewCustomers }}
								</view>
							</view>
							<view style="margin-top: 10px; margin-left: 0px; text-align: right">
								<image src="../../static/images/discount.png" mode="aspectFit"
									style="width: 40px; height: 40px"></image>
							</view>
						</view>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="grid-box">
						<view style="display: flex; justify-content: space-between"
							@click="gotoPage(`/pages/boss/customer_order?osUuid=${storeValue}`)">
							<view style="flex: 1.5; margin-right: 20; text-align: left">
								<Text style="color: #9a7d76">客户订单</Text>
								<view style="font-weight: 600; font-size: 25px; margin-top: 5px">
									{{ totalCustomerOrders }}
								</view>
							</view>
							<view style="margin-top: 10px; margin-left: 0px; text-align: right">
								<image src="../../static/images/order.png" mode="aspectFit"
									style="width: 40px; height: 40px"></image>
							</view>
						</view>
					</view>
				</uni-grid-item>
				<!-- 				<uni-grid-item>
					<view class="grid-box grid-box1">
						<view style="display: flex; justify-content: space-between"
							@click="gotoPage(`/pages/staff/customer_group`)">
							<view style="flex: 1.5; margin-right: 20; text-align: left">
								<Text style="color: #9a7d76">客户的团</Text>
								<view style="font-weight: 600; font-size: 25px; margin-top: 5px">{{ totalGroup }}</view>
							</view>
							<view style="margin-top: 10px; margin-left: 0px; text-align: right">
								<image src="../../static/images/group.png" mode="aspectFit"
									style="width: 40px; height: 40px"></image>
							</view>
						</view>
					</view>
				</uni-grid-item> -->
			</uni-grid>
		</uni-section>

		<uni-section title="员工" type="line" padding="0">
			<uni-grid :column="2" :highlight="true" :showBorder="false" :square="false">
				<uni-grid-item>
					<view class="grid-box">
						<view style="display: flex; justify-content: space-between"
							@click="gotoPage(`/pages/boss/staff_share?osUuid=${storeValue}`)">
							<view style="flex: 1.5; margin-right: 20; text-align: left">
								<Text style="color: #9a7d76">员工分享</Text>
								<view style="font-weight: 600; font-size: 25px; margin-top: 5">{{ totalStaffShare }}
								</view>
							</view>
							<view style="margin-top: 10px; margin-left: 0px; text-align: right">
								<image src="../../static/images/customers.png" mode="aspectFit"
									style="width: 40px; height: 40px"></image>
							</view>
						</view>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="grid-box grid-box1">
						<view style="display: flex; justify-content: space-between"
							@click="gotoPage(`/pages/boss/staff_fission?osUuid=${storeValue}`)">
							<view style="flex: 1.5; margin-right: 20; text-align: left">
								<Text style="color: #9a7d76">员工裂变</Text>
								<view style="font-weight: 600; font-size: 25px; margin-top: 5">{{ totalStaffFission }}
								</view>
							</view>
							<view style="margin-top: 10px; margin-left: 0px; text-align: right">
								<image src="../../static/images/discount.png" mode="aspectFit"
									style="width: 40px; height: 40px"></image>
							</view>
						</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</uni-section>

		<uni-section title="总榜单" type="line" padding="0">
			<uni-grid :column="3" :highlight="true" :showBorder="false" :square="false">
				<uni-grid-item v-for="(item, index) in topLists">
					<view class="grid-box" @click="gotoPage(item.url)">
						<view style="text-align: center;">
							<image :src="item.src" mode="aspectFit" style="width: 40px; height: 40px"></image>
							<view>{{ item.title }}</view>
						</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</uni-section>

		<view style="padding: 40px 10px 0 10px">
			<u-button type="success" @click="exitLogin">退出登录</u-button>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapGetters
	} from "vuex";
	import {
		getActivityStores,
		getBossHomePage
	} from "../../utils/api.js";
	import {
		numberFormat,
		userAuthorization
	} from "../../utils/helper";

	export default {
		data() {
			return {
				totalCustomerOrders: 0,
				totalCustomers: 0,
				totalNewCustomers: 0,

				totalStaffShare: 0,
				totalStaffFission: 0,

				totalPrice: 0,
				totalOrder: 0,
				storeValue: "",
				stores: [],
				topLists: [{
						title: "热销项目",
						src: "../../static/images/hot.png",
						url: "/pages/boss/hot_items",
					},
					{
						title: "门店排行",
						src: "../../static/images/personrank.png",
						url: "/pages/boss/store_rank",
					},
					{
						title: "客户预约",
						src: "../../static/images/supermarket.png",
						url: "/pages/boss/customer_appointment",
					},
				],
			};
		},

		onLoad(params) {
			this.getActivityStores();
		},

		// onShow() {
		// 	this.getActivityStores();
		// },

		computed: {
			...mapGetters({
				appid: "globalInfo/appid",
				userInfo: "personInfo/userInfo",
				staffInfo: "personInfo/staffInfo",
				activity: "activityInfo/activity",
			}),
		},

		watch: {
            activity: {
                handler(newValue, oldValue) {
                    if (newValue?.gpUuid) {
                        this.getActivityStores();
                    }
                },
                immediate: true,
                deep: true,
            },
			storeValue: {
				handler(newValue, oldValue) {
					if (newValue && this.activity.gpUuid) {
						this.getBossHomePage()
					}
				},
				immediate: true,
				deep: true,
			},
		},
		methods: {
			...mapMutations({}),
			// 返回上一级
			goBack() {
				uni.switchTab({
					url: "/pages/ucenter/index"
				})
			},

			async getActivityStores() {
                if (this.activity?.gpUuid) {
                    let res = await getActivityStores(this.activity.gpUuid);
                    if (res) {
                    	let stores = res.map(item => ({
                    		value: item.info.osUuid,
                    		text: item.info.osName
                    	}))
                    	this.stores = stores
                    	this.storeValue = stores[0]?.value
                    }
                }
			},
			// 获取当前选中门店
			change(e) {
				if (e) this.storeValue = e
			},

			async getBossHomePage() {
				if (this.storeValue && this.activity.gpUuid) {
					let res = await getBossHomePage({
						osUuid: this.storeValue,
						gpUuid: this.activity?.gpUuid
					});
					if (res) {
						let newCust = 0;
						res.customer?.nodes?.map(item => {
							if (item.relation?.totalCount > 0) newCust += 1
						});
						this.totalCustomers = res.customer?.totalCount || 0;
						this.totalNewCustomers = newCust;
						this.totalCustomerOrders = res.orders?.totalCount || 0;

						this.totalStaffShare = res.staffShare?.aggregates?.sum?.sfShat || 0;
						this.totalStaffFission = res.staffShare?.aggregates?.sum?.sfShao || 0;

						this.totalPrice = res.nodes?.nodes[0]?.osOrmo || 0;
						this.totalOrder = res.nodes?.nodes[0]?.osOrqu || 0;
					}
				}
			},

			gotoPage(url) {
				uni.navigateTo({
					url,
				});
			},

			exitLogin() {
				const that = this;
				uni.showModal({
					title: "确认要退出当前登录吗？",
					success: async (res) => {
						if (res.confirm) {
							that.$store.dispatch("personInfo/save", {
								staffInfo: {},
							});
							uni.switchTab({
								url: "/pages/ucenter/index",
							});
						}
					},
				});
			},
		},
	};
</script>

<style lang="scss">
	page {
		margin-bottom: 10px;
		background-color: #eee;

		.uni-select {
			font-size: 18px;
			font-weight: 600;
			border: 0;
			border-bottom: 0;
		}
	}
</style>

<style lang="scss" scoped>
	page {
		margin-bottom: 10px;
	}

	.header {
		padding: 80px 10px 0 10px;
		background-color: #ba8d76;

		.userinfo {
			padding: 10px 15px 10px 24px;
			background-color: #fff;
			border-radius: 5px;
			margin-top: 20px;
		}

		.vip {
			color: #fff;
			padding: 20px 0;

			.num {
				margin-top: 5px;
				text-align: center;
				font-size: 20px;
			}

			.label {
				text-align: center;
				font-size: 12px;
				margin-top: 5px;
			}
		}
	}

	.list-box {
		padding: 2px;
		border-radius: 6px;
		box-shadow: 0 0px 6px 1px rgba(165, 165, 165, 0.2);
		background-color: #fff;
		margin-bottom: 10px;
	}

	.grid-box {
		border-radius: 10px;
		box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
		background-color: #fff;
		padding: 10px 20px;
		margin: 0 5px 10px 10px;
	}

	.grid-box1 {
		margin: 0 10px 5px 5px;
	}
</style>
